*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	
    	}
html,body{
    		width: 100%;
    		height: 100%;
    		line-height: 2.1rem;
    	
    	}
    	
#mainbody{
    	 width: 100%;
       height: 100%;
    	margin: auto;
       position:absolute;
    	}
.page1{
	width: 100%;
    height: 100%;
	position:absolute;
	
	background: url(back1.jpg);
    background-size:contain;
    display: block;

}
.page1-1{
	width: 100%;
    height: 100%;
	position:absolute;
	
	background: url(../img/back1.jpg);
    background-size:contain;
   
    display: none;



}
#mainbody>img{
	animation: fade-in;/*动画名称*/  
    animation-duration: fade-in 6s linear  ;/*动画持续时间*/  
    -webkit-animation:fade-in 6s linear ;/*针对webkit内核*/  
	
}
/*背景动画*/
    @keyframes fade-in {  
        0% {opacity: 0;}
        5% {opacity: 0.2;} 
        10% {opacity: 0.3;} 
        20% {opacity: 0.3.5;} 
        40% {opacity: 0.4;} 
        45% {opacity: 0.7;} 
        50% {opacity: 0.86;} 
        60% {opacity: 0.87;} 
        70% {opacity: 0.89;} 
       
        90% {opacity: 0.9;} 
        100% {opacity: 1;}
        
    }  
    @-webkit-keyframes fade-in {
        0% {opacity: 0;}
        5% {opacity: 0.2;} 
        10% {opacity: 0.3;} 
        20% {opacity: 0.3.5;} 
        40% {opacity: 0.4;} 
        45% {opacity: 0.7;} 
        50% {opacity: 0.86;} 
        60% {opacity: 0.87;} 
        70% {opacity: 0.89;} 
       
        90% {opacity: 0.9;} 
        100% {opacity: 1;}
       
        }
    

  .p_moon >img{
  	position: absolute;
  	top: 0%;
  	right: 0%;
  
  	width: 11rem;
  	height:15.04832713754647rem;
  	 
  	 animation: aa;/*动画名称*/  
     animation-duration: aa 2s linear infinite;/*动画持续时间*/  
    -webkit-animation:aa 2s linear  infinite;/*针对webkit内核*/  
  	 
  	
  	
  	}  
  	/*月亮动画*/
    @keyframes aa {  
        0% {transform: scale(1);}
        20% {transform: scale(1.02);} 
        40% {transform: scale(1.04);}   
        60% {transform: scale(1.06);} 
        80% {transform: scale(1.04);} 
        100% {transform: scale(1);}
    }  
    @-webkit-keyframes aa {
          0% {transform: scale(1);}
        20% {transform: scale(1.02);} 
        40% {transform: scale(1.04);}   
        60% {transform: scale(1.06);} 
        80% {transform: scale(1.04);} 
        100% {transform: scale(1);}
        }
/*        闪烁效果*/
   .moonlight{
   	position: absolute;
  	top: -3.9rem;
  	right: -2.9rem;
   	width: 12rem;
  	height:12rem;
    border-radius:21rem;
  	
  	 -webkit-box-shadow:0rem 0rem 8rem 	#FFED97;  
     -moz-box-shadow:0rem 0rem 8rem  #FFED97;  
     box-shadow:0rem 0rem 8rem#FFED97; 
 	 animation: light;/*动画名称*/  
     animation-duration: light 0.5s linear infinite;/*动画持续时间*/  
    -webkit-animation:light 0.5s linear  infinite;/*针对webkit内核*/  
  	
   	
   	
   } 
    
    @keyframes light{  
        0% {opacity: 1;}
        5% {opacity: 0.8;} 
        10% {opacity: 0.7;} 
        20% {opacity: 0.6;} 
        40% {opacity: 0.5;} 
        45% {opacity: 0.3;} 
        50% {opacity: 0.5;} 
        60% {opacity: 0.7;} 
        70% {opacity: 0.8;} 
       
        90% {opacity: 0.9;} 
        100% {opacity: 1;}
    }  
    @-webkit-keyframes light {
         0% {opacity: 1;}
        5% {opacity: 0.8;} 
        10% {opacity: 0.7;} 
        20% {opacity: 0.6;} 
        40% {opacity: 0.5;} 
        45% {opacity: 0.3;} 
        50% {opacity: 0.5;} 
        60% {opacity: 0.7;} 
        70% {opacity: 0.8;} 
       
        90% {opacity: 0.9;} 
        100% {opacity: 1;}
        } 
/*灯笼*/
.lantern{
	position: absolute;
  	top: 3.5%;
    left: 3%;
    
  	width: 12rem;
  	height:12rem;

}
    
.lantern>img{
	
	width: 3.9rem;
  	height:6.3024rem;
	
	
}    
 .shizi{
 
  	width: 33rem;
  	height:43rem;
  	  
 	
 }
   .shizi>img{
   	position: absolute;
  	top: 9%;
    right: 4%;
    
   	width: 32.5rem;
  	height:44.2325rem;
	
   	
   	
   }
   .city{
   	width: 33rem;
  	height:43rem;
   	
   }
   .city>img{
   	position: absolute;
  	bottom: 0%;
    right: 0%;
    left: 0%;
    
   	width: 100%;
  	
   }
   
  
   .yanhua{
   	width: 11rem;
  	height:11rem;
  
   }
   .yanhua>img{
   	position: absolute;
  	top: 0%;
    left: 2%;
  	width: 100%;
 	animation: yanhua;/*动画名称*/  
     animation-duration: yanhua 1s  linear;
    -webkit-animation:yanhua 1s linear;/*针对webkit内核*/  
  
   	
   }
   @keyframes yanhua{  
         0% {transform: scale(0);}
        20% {transform: scale(0.3);} 
        40% {transform: scale(0.6);}   
        60% {transform: scale(0.8);} 
        80% {transform: scale(0.9);} 
        100% {transform: scale(1);}
    }  
    @-webkit-keyframes yanhua{
        0% {-webkit-transform: scale(0);}
        20% {-webkit-transform: scale(0.3);} 
        40% {-webkit-transform: scale(0.6);}   
        60% {-webkit-transform: scale(0.8);} 
        80% {-webkit-transform: scale(0.9);} 
        100% {-webkit-transform: scale(1);}
        } 
 
.music >img:first-of-type{
	position: absolute;
  	bottom: 0.17%;
  	left: 80.9%;
  
  	width: 5.5rem;
  	height:5.5rem;
  	z-index: 5;
	}
	

.music >img:last-of-type{
position: absolute;
  	bottom: 0.25%;
  	right: 1.36%;
  
  	width: 5.2rem;
  	height:5.2rem;
	z-index: 4;
	
}
.music>img.play{
	
	-o-animation:cd 2s linear infinite;/*动画名称*/  
    -webkit-animation:cd 2s linear infinite;/*针对webkit内核*/ 
	animation:cd 2s linear  infinite;/*动画名称*/  
	animation-play-state:running;
}
*音乐托盘*/
@keyframes cd
{
	0%   {
		 -o-transform: rotate(0deg);
	     -webkit-transform: rotate(0deg);
	     transform: rotate(0deg);
	 -ms-transform: rotate(0deg);
	   }
	
	100% { -o-transform: rotate(360deg);
	     -webkit-transform: rotate(360deg);
	     transform: rotate(360deg);
	     	 -ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cd
{
	0%   {
			 -ms-transform: rotate(0deg);
		 -o-transform: rotate(0deg);
	     -webkit-transform: rotate(0deg);
	     transform: rotate(0deg);
	
	   }
	
	100% { 
			 -ms-transform: rotate(360deg);
			 -o-transform: rotate(360deg);
	     -webkit-transform: rotate(360deg);
	     transform: rotate(360deg);
	}
}
@-o-keyframes cd
{
	0%   {
			 -ms-transform: rotate(0deg);
		 -o-transform: rotate(0deg);
	     -webkit-transform: rotate(0deg);
	     transform: rotate(0deg);
	
	   }
	
	100% { 
			 -ms-transform: rotate(360deg);
			 -o-transform: rotate(360deg);
	     -webkit-transform: rotate(360deg);
	     transform: rotate(360deg);
	}
}

.music>img.stop{
	position: absolute;
  	bottom: 0.17%;
  	left: 80.9%;
  
  	width: 5.5rem;
  	height:5.5rem;
  	z-index: 10;
  	border-radius:6rem;	
    box-shadow:0rem 0rem 5rem #B9B9FF;  
    animation-play-state: paused;
	
}




.page2{
	
	width: 100%;
    height: 100%;
	position:absolute;
    display: none;
      
	
	
}
.page2-2{
	
	width: 100%;
    height: 100%;
	position:absolute;
    display:block;
   
}

.p2-back>img{
	position: absolute;
  	top: 0%;
  	right: 0%;
  	width: 100%;
  	height:100%;
		
}
.p2_chicken>img {
    position: absolute;
    top: 5.23%;
    right: 17%;
    width: 20rem;
    height: 14.1371158392435rem;
}

.chicken>img{
	 position: absolute;
    top: 80%;
    right: 17%;
    width: 20rem;
    height: 14.1371158392435rem;
	
}
/* 祝福语  */
.write {
    position: absolute;
    top: 32.2%;
    right: 10%;
    width: 23rem;
    height: 0rem;
    color: #FF7744;
    animation: ziti;/*动画名称*/  
    animation-duration: ziti 6s linear ;/*动画持续时间*/  
    -webkit-animation:ziti 6s linear ;/*针对webkit内核*/  
 
}
@keyframes ziti{  
  100% {
      transform: translate(0rem, 0rem); }
  
  50% { transform: translate(0rem, 10rem) ; }
 
  0% { transform: translate(0rem, 20rem) ; } 
    }  
@-webkit-keyframes ziti{
	100% {
      transform: translate(0rem, 0rem); }
  
  50% { transform: translate(0rem, 10rem) ; }
 
  0% { transform: translate(0rem, 20rem) ; } 
	
	
	
	
	
}

.button1{
	
	
	
	
	
}

 .button1>a{
 	
 	position: absolute;
    top: -1.6rem;
    right: 41%;
    width: 6.0rem;
    height: 2.2rem;
    animation: shake;/*动画名称*/  
     animation-duration: shake 2s linear ;/*动画持续时间*/  
    -webkit-animation:shake 2s linear ;/*针对webkit内核*/  
 	 opacity:0;
 	 animation-fill-mode:forwards;
 	 animation-delay:8s;
-webkit-animation-delay:8s; /* Safari 和 Chrome */
 } 
   @keyframes shake{  
   0% {
      transform: translate(0rem, 0rem); opacity: 1;}
  
  15% { transform: translate(0rem, 10rem) ;opacity: 1; }
  
  35% { transform: translate(0rem, 20rem) ; opacity: 1;}
   55% { transform: translate(0rem, 30rem) ; opacity: 1;}
  75% { transform: translate(0rem, 40rem) ; opacity: 1;}
  85% { transform: translate(0rem, 45rem) ; opacity: 1;}
  87% { transform: translate(0rem, 43rem) ;rotate(0.5deg); opacity: 1;}
  90% { transform: translate(0rem, 45rem) ; rotate(-0.5deg);opacity: 1;}
  96% { transform: translate(0rem, 44rem) ;rotate(0.5deg); opacity: 1;}
  100% { transform: translate(0rem, 45rem) ; opacity: 1;} 
    }  
    @-webkit-keyframes shake{
    	    0% {
      transform: translate(0rem, 0rem); }
  
  15% { transform: translate(0rem, 10rem) ; }
  
  35% { transform: translate(0rem, 20rem) ; }
   55% { transform: translate(0rem, 30rem) ; }
  75% { transform: translate(0rem, 40rem) ; }
  85% { transform: translate(0rem, 45rem) ; }
  87% { transform: translate(0rem, 43rem) ; }
  90% { transform: translate(0rem, 45rem) ; }
  96% { transform: translate(0rem, 44rem) ; }
  100% { transform: translate(0rem, 45rem) ; } 
         /*0% {
      transform: translate(-0.1rem, 0.5rem) rotate(0.5deg); }
  
  10% { transform: translate(0.5rem, 0.5rem) rotate(-0.5deg); }
  
  20% { transform: translate(-0.1rem, -0.1rem) rotate(-0.5deg); }
  
  30% { transform: translate(-0.25rem, 0.5rem) rotate(0.5deg); }
  
  40% { transform: translate(-0.1rem, 0.5rem) rotate(0.5deg); }
 
  50% { transform: translate(-0.5rem, -0.1rem) rotate(-0.5deg); }
  
  60% { transform: translate(-0.1rem, -0.25rem) rotate(-0.1deg); }
  
  70% { transform: translate(-0.1rem, -0.25rem) rotate(-0.5deg); }
 
  80% { transform: translate(-0.25rem, -0.25rem) rotate(-0.1deg); }
  
  90% { transform: translate(-0.5rem, -0.5rem) rotate(-0.5deg); }
  
  100% { transform: translate(-0.1rem, 0.5rem) rotate(-0.1deg); } */
        }
    

 
 
 
 .button1>h4{
 	position: absolute;
    bottom: 9%;
    right: 30%;
    
    color: #FFD700  ;

animation: m;/*动画名称*/  
    animation-duration: m 6s linear ;/*动画持续时间*/  
    -webkit-animation:m 6s linear ;/*针对webkit内核*/  
    opacity: 0;
     animation-fill-mode:forwards;
 	 animation-delay:7.5s;
-webkit-animation-delay:7.5s; /* Safari 和 Chrome */
 }
 @keyframes m{  
  100% {
      opacity: 1;}
  
  50% { opacity:0.5; }
 
  0% { opacity: 0; } 
    }  
@-webkit-keyframes m{
	 100% {
      opacity: 1;}
  
  50% { opacity:0.5; }
 
  0% { opacity: 0; } 
	
	
	
	
	
}
 
 
 
 
.yellow {
	color: #986a39;
	border: 0.1rem solid #e6b650;
	background-image: -moz-linear-gradient(#ffd974, #febf4d);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#febf4d), to(#ffd974));
	background-image: -webkit-linear-gradient(#ffd974, #febf4d);
	background-image: -o-linear-gradient(#ffd974, #febf4d);
	text-shadow: 0.1rem 0.1rem 0.1rem #fbe5ac;
	background-color: #febf4d;
}

.yellow:active {border: 0.1rem solid #936b26;}
.button {
	position: absolute;
	bottom: 40%;
	left: auto;
	height:3rem ;
	width: 3rem;
	display: block; 

	text-decoration: none!important; 

	border-radius: 0.5rem; 
	-moz-border-radius: 0.5rem; 
	box-shadow: inset 0rem 0px 2px #fff;

	-webkit-box-shadow: inset 0px 0px 2px #fff;

}

.weixin{
	
 
    position: absolute;
    top: 10%;
    right: 2.5%;
    width: 28.5rem;
    height: 28.5rem;
    background: black;
    opacity: 0.75;
    display: none;

}

.weixin>img
{
	position: absolute;
    top: 7.4%;
    left: 6%;
    width: 25rem;
    height: 25rem;
   
}
/*//箭头动画*/
.jt>img{
	position: absolute;
    bottom: 2%;
    left: 40%;
    width: 4rem;
    height: 3rem;
    animation: bbb;/*动画名称*/  
     animation-duration: bbb 0.5s linear infinite;/*动画持续时间*/  
    -webkit-animation:bbb 0.5s linear  infinite;/*针对webkit内核*/  
	opacity: 0.6;
	
}
 @keyframes bbb{  
        0% {transform: scale(1);}
        20% {transform: scale(1.03);} 
        40% {transform: scale(1.05);}   
        60% {transform: scale(1.09);} 
        80% {transform: scale(1.03);} 
        100% {transform: scale(1);}
    }  
    @-webkit-keyframes bbb{
        0% {transform: scale(1);}
        20% {transform: scale(1.03);} 
        40% {transform: scale(1.05);}   
        60% {transform: scale(1.09);} 
        80% {transform: scale(1.03);} 
        100% {transform: scale(1);}
        } 

.happy>img{
	position: absolute;
    top: 0%;
    left: 12%;
    width: 23rem;
    height: 11.29666011787819rem;
	   animation: hp;/*动画名称*/  
     animation-duration: hp 2s linear ;/*动画持续时间*/  
    -webkit-animation:hp 2s linear ;/*针对webkit内核*/  
 	 opacity:0;
 	 animation-fill-mode:forwards;
 	 animation-delay:1s;
-webkit-animation-delay:1s; /* Safari 和 Chrome */
	
	
}
 @keyframes hp{  
   0% {
      transform: translate(0rem, 0rem); opacity: 1;}
  
  15% { transform: translate(0rem, 1rem) ;opacity: 1; }
  
  35% { transform: translate(0rem, 2rem) ; opacity: 1;}
   55% { transform: translate(0rem, 3rem) ; opacity: 1;}
  75% { transform: translate(0rem, 3.8rem) ; opacity: 1;}
  85% { transform: translate(0rem, 4rem) ; opacity: 1;}
  87% { transform: translate(0rem,4.3rem) ;rotate(0.5deg); opacity: 1;}
  90% { transform: translate(0rem, 3.8rem) ; rotate(-0.5deg);opacity: 1;}
  96% { transform: translate(0rem, 4.8rem) ;rotate(0.5deg); opacity: 1;}
  100% { transform: translate(0rem, 4.3rem) ; opacity: 1;} 
    }  
    @-webkit-keyframes hp{
    	    0% {
      transform: translate(0rem, 0rem); }
  
  15% { transform: translate(0rem, 10rem) ; }
  
  35% { transform: translate(0rem, 20rem) ; }
   55% { transform: translate(0rem, 30rem) ; }
  75% { transform: translate(0rem, 40rem) ; }
  85% { transform: translate(0rem, 45rem) ; }
  87% { transform: translate(0rem, 43rem) ; }
  90% { transform: translate(0rem, 45rem) ; }
  96% { transform: translate(0rem, 44rem) ; }
  100% { transform: translate(0rem, 45rem) ; } 
  }
  canvas {
  	position: absolute;
  	top: 0%;left: auto;
  	width: 100%;
  	height: 100%;
  display: block;
  
}           